<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>任务</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="https://og6593g2z.qnssl.com/fundebug.0.3.3.min.js" apikey="e65b1e28cd641345cd31ef6dce8ac62f7aaa3ba3420be5a1c4aa23ee3636992d"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/productTask/moment.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/productTask/vue.min.js{$Think.config.RESOURCE_VER}"></script>
    <!--<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">-->
    <link href="{$Think.config.SERVER_NAME}/wx_assets/productTask/iview.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="{$Think.config.RESOURCEURL}wx_assets/productTask/iview.min.js{$Think.config.RESOURCE_VER}"></script>
    <link href="{$Think.config.RESOURCEURL}wx_assets/productTask/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/productTask/messageInfo.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
</head>
<body>
<div id="app">
    <section class="container">
        <ul id="messageList">
            <li v-for="(p,index) in list" :key="index" :class="{right:p.customerMassage!=1}">
                <div class="headImg" v-if="p.customerMassage==1">
                    <img :src="storeInfo.logo" alt="">
                </div>
                <div class="headImg" v-else>
                    <img :src="userInfo.headimgurl" alt="">
                </div>
                <div class="content">
                    <div class="title" v-if="p.customerMassage==1" v-text="storeInfo.name"></div>
                    <div class="title" v-else v-text="userInfo.nickname"></div>
                    <div class="description" v-if="p.type=='text'" v-text="p.content" style="color:#333;"></div>
                    <div class="description" v-if="p.type=='voice'">
                        <i-audio :url="p.content" :voice-time="p.voiceTime"></i-audio>
                    </div>
                    <div class="description" v-if="p.type=='image'" style="font-size:0;line-height:0">
                        <img :src="p.content"/>
                    </div>
                    <div class="operate" v-if="p.customerMassage!=1&&status!=1"><a @click="deletedMessage(index)">撤回</a></div>
                </div>
            </li>
            <li v-if="status==1&&money&&money>0">
                <div class="headImg">
                    <img :src="storeInfo.logo" alt="">
                </div>
                <div class="content">
                    <div class="title" v-text="storeInfo.name"></div>
                    <div class="description" style="font-size:0;line-height:0;padding:0;background:none;width:14rem;">
                        <img src="{$Think.config.RESOURCEURL}wx_assets/productTask/task_reward.png{$Think.config.RESOURCE_VER}" style="max-width:none;width:100%;max-height:none"/>
                    </div>
                </div>
            </li>
        </ul>
        <div class="footer">
            <i-menu mode="horizontal" active-name="2" class="menu" @on-select="menuChange">
                <menu-item name="1" class="menuItem">
                    <Icon type="ios-mic-outline"></Icon>
                    语音
                </menu-item>
                <menu-item name="2" class="menuItem">
                    <Icon type="ios-compose-outline"></Icon>
                    文字
                </menu-item>
                <menu-item name="3" class="menuItem">
                    <Icon type="image"></Icon>
                    图片
                </menu-item>
            </i-menu>
            <div class="text" v-if="menuIndex==2">
                <input type="text" placeholder="来说点什么吧..." v-model="textContent">
                <a @click="sendMessage('text')">发送</a>
            </div>
            <div class="voice" v-if="menuIndex==1">
                <template v-if="voliceStatus==1">
                    <div class="title">录音中，再录<span>{{time}}s</span>将可发送，点击停止</div>
                    <div class="btn stop" @click="voiceChange(2)"><Icon  type="stop"/></div>
                </template>
                <template v-else-if="voliceStatus==2">
                    <div class="title">本次录音共<span>{{60-time}}s</span>
                        <a @click="playVoice" v-if="playVoiceStatus==1">暂停</a>
                        <a @click="playVoice" v-else>试听</a>
                        <a @click="recorded">重录</a>
                    </div>
                    <div class="btn send" @click="uploadVoice">
                        发送
                    </div>
                </template>
                <template v-else>
                    <div class="title">点击开始录音</div>
                    <div class="btn" @click="voiceChange(1)">
                        <a class="start"></a>
                    </div>
                </template>

            </div>
        </div>
    </section>
</div>
</body>
<script>
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var iAudio = {
        template: '<section class="audioTpl">\
                        <audio controls :src="url" ref="audio" style="display:none" @canplay="init" preload="load"></audio>\
                        <div>\
                            <span class="time">{{time}}\'\'</span>\
                            <i-progress :percent="progress" class="progress" :stroke-width="5" hide-info></i-progress>\
                            <a @click="play()"><icon :type="icon"></icon></a>\
                        </div>\
            </section>',
        props:{
            url:{
                type:String,
                default:function(){
                    return ''
                }
            },
            voiceTime:{
                type:Number,
                default:function(){
                    return 0
                }
            }
        },
        data:function(){
            return {
                time:0,
                progress:0,
                voiceInfo:null,
                isPlay:0,
                interval:null,
                icon:'play'
            }
        },
        mounted:function(){
            this.voiceInfo = this.$refs['audio'];
            this.voiceTime?this.time = this.voiceTime:"";
        },
        methods:{
            init:function(){
                this.time = parseInt(this.voiceInfo.duration);
            },
            play:function(){
                var self = this;
                if(!this.isPlay){
                    this.icon='pause';
                    self.voiceInfo.play();
                    this.interval = setInterval(function(){
                        var currentTime = parseInt(self.voiceInfo.currentTime);
                        self.progress = parseInt(currentTime/self.time*100);
                        if(self.progress>=100){
                            self.icon='play';
                            clearInterval(self.interval);
                            self.isPlay = !self.isPlay;
                        }
                    },1000)
                }else{
                    this.icon='play';
                    this.voiceInfo.pause();
                    clearInterval(this.interval);
                }
                this.isPlay = !this.isPlay;
            }
        }
    }
    var app = new Vue({
        el: '#app',
        components: {
            iAudio:iAudio
        },
        data: function(){
            return{
                menuIndex:2,
                voliceStatus:0,
                list:[],
                storeInfo:{},
                userInfo:{},
                status:0,
                textContent:'',
                mediaUrl:'',
                time:60,
                localId:'',
                money:0,
                playVoiceStatus:0
            }
        },
        mounted:function(){
            this.init();
        },
        methods:{
            init:function(){
                this.renderView();
            },
            renderView:function(){
                var p=$.util.getParamAsObject();
                var taskId = p.taskId,
                        progressId = p.progressId,
                        self = this;
                var params={
                    taskId:taskId,
                    progressId:progressId
                };
                $.req.get("call.json?module=productTask&customerId={$customerId}&method=getProgressInfo",{
                            params:params
                },function(data){
                    if(data.code){
                        self.$Modal.error({
                            content: data.msg
                        });
                    }else{
                        self.userInfo = data.userInfo;
                        self.list = data.list;
                        self.storeInfo = data.storeInfo;
                        self.status = data.status;
                        self.money = data.money;
                    }
                    self.$nextTick(function(){
                        $('body').scrollTop( $('body')[0].scrollHeight );
                    })
                })
            },
            recorded:function(){
                var self = this;
                this.$Modal.confirm({
                    render:function(h){
                        return h("p",{},'确定取消录音吗？')
                    },
                    okText: '确定',
                    cancelText: '取消',
                    onOk: function(){
                        self.voliceStatus=0
                    }
                })
            },
            sendMessage:function(type){
                var p=$.util.getParamAsObject();
                var content = '',
                        message = {},
                        taskId = p.taskId,
                        progressId = p.progressId,
                        self = this;
                var params={
                    taskId:taskId,
                    progressId:progressId,
                    type:type
                };
                switch(type){
                    case 'image':
                        content = this.mediaUrl;
                        message = {
                            content: content,
                            customerMassage: "0",
                            type: "image"
                        };
                        break;
                    case 'text':
                        content = this.textContent;
                        message = {
                            content: content,
                            customerMassage: "0",
                            type: "text"
                        };
                        break;
                    case 'voice':
                        content = this.mediaUrl;
                        var voiceTime = 60-this.time;
                        message = {
                            content: content,
                            customerMassage: "0",
                            type: "voice",
                            voiceTime:voiceTime
                        };
                        params.voiceTime = voiceTime;
                        break;
                }
                params.content = content;
                $.req.post("call.json?module=productTask&customerId={$customerId}&method=sendMessage",{
                    module:'productTask',
                    customerId:'{$customerId}',
                    method:'sendMessage',
                    params:params
                },function(data){
                    if(data.code){
                        self.$Modal.error({
                            content: data.msg
                        });
                    }else{
                        message.id = data.id;
                        self.list.push(message);
                        self.voliceStatus = 0;
                        self.textContent = '';
                        self.$nextTick(function(){
                            $('body').scrollTop( $('body')[0].scrollHeight );
                        })
                    }
                })
            },
            deletedMessage:function(index){
                var id = this.list[index].id;
                var params={
                    id:id
                };
                var self = this;
                this.$Modal.confirm({
                    render:function(h){
                        return h("p",{},'确定撤回')
                    },
                    okText: '确定',
                    cancelText: '取消',
                    onOk: function(){
                        $.req.get("call.json?module=productTask&customerId={$customerId}&method=deletedMssage",{
                            params:params
                        },function(data){
                            if(data.code){
                                self.$Modal.error({
                                    content: data.msg
                                });
                            }else{
                                self.list.splice(index,1);
                            }
                        })
                    }
                })
            },
            menuChange:function(name){
                var self = this;
                if(name==3){
                    wx_share.uploadImage(function(data){
                        self.mediaUrl = data.path;
                        self.sendMessage('image')
                    })
                }
                this.menuIndex=name;
                this.$nextTick(function(){
                    $("#messageList").css("padding-bottom",$(".footer").height()+"px");
                    $('body').scrollTop( $('body')[0].scrollHeight );
                })
            },
            voiceChange:function(status){
                var self = this;
                if(status==1){
                    this.time = 60;
                    setTimeout(this.updateTime,1000);
                    wx_share.startRecord();
                    wx_share.onVoiceRecordEnd(function(localId){
                        self.voliceStatus=2;
                        self.localId  = localId;
                    });
                }else if(status==2){
                    wx_share.stopRecord(function(localId){
                        self.localId = localId;
                    })
                }
                this.voliceStatus=status;
            },
            uploadVoice:function(){
                var localId = this.localId;
                var self = this;
                wx_share.uploadVoice(localId,function(data){
                    self.mediaUrl = data.path;
                    self.sendMessage('voice');
                })
            },
            playVoice:function(){
                var self = this;
                if(this.playVoiceStatus==1){
                    this.playVoiceStatus = 0;
                    wx_share.pauseVoice(this.localId);
                }else{
                    this.playVoiceStatus = 1;
                    wx_share.playVoice(this.localId);
                    wx_share.onVoicePlayEnd(function(){
                        self.playVoiceStatus = 0;
                    });
                }
            },
            updateTime:function(){
                if(this.voliceStatus==1){
                    --this.time;
                    setTimeout(this.updateTime,1000);
                }
            }
        }
    })
</script>
<script>
    wx_share.init({
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": '{$pkg.timestamp}',
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        apiList:[
            'playVoice',
            'stopVoice',
            'uploadVoice',
            'startRecord',
            'stopRecord',
            'onVoiceRecordEnd',
            'pauseVoice',
            'onVoicePlayEnd'
        ],
        "hideAllnone":true
    });
</script>
</html>
